import { useI18n } from "@/hooks/web/useI18n";
import { VueNode } from "@/utils/propTypes";
import { ButtonProps } from "element-plus";
import { PropType } from "vue";
import { BtnType } from "./typing";

const { t } = useI18n();

export const modalProps = {
  modelValue: { type: Boolean },
  scrollTop: { type: Boolean, default: true },
  height: { type: Number },
  minHeight: { type: Number },
  // open drag
  draggable: { type: Boolean, default: true },
  centered: { type: Boolean },
  cancelText: { type: String, default: t("common.cancelText") },
  okText: { type: String, default: t("common.okText") },
  // 是否可以进行全屏
  canFullscreen: { type: Boolean, default: true },
  closeFunc: Function as PropType<() => Promise<boolean>>,
  useWrapper: { type: Boolean, default: true },
};

export const basicProps = Object.assign({}, modalProps, {
  fullscreen: { type: Boolean },
  title: { type: String },
  // Dialog 自身是否插入至 body 元素上。 嵌套的 Dialog 必须指定该属性并赋值为 true
  appendToBody: { type: Boolean },
  // 当关闭 Dialog 时，销毁其中的元素
  destroyOnClose: { type: Boolean },
  // 是否可以通过点击 modal 关闭 Dialog
  closeOnClickModal: { type: Boolean },
  // 是否可以通过按下 ESC 关闭 Dialog
  closeOnPressEscape: { type: Boolean },
  // 是否在 Dialog 出现时将 body 滚动锁定
  lockScroll: { type: Boolean },
  // 是否需要遮罩层
  modal: { type: Boolean },
  // Dialog 打开的延时时间，单位毫秒
  openDelay: { type: Number },
  // Dialog 关闭的延时时间，单位毫秒
  closeDelay: { type: Number },
  // Dialog CSS 中的 margin-top 值
  top: { type: String },
  modalClass: { type: String },
  width: { type: Number || String },
  zIndex: { type: Number },
  trapFocus: { type: Boolean },
  center: { type: Boolean },
  closeIcon: Object as PropType<VueNode>,
  customClass: { type: String },
  draggable: { type: Boolean, default: true },
  showClose: { type: Boolean },

  cancelButtonProps: Object as PropType<ButtonProps>,
  okButtonProps: Object as PropType<ButtonProps>,
  confirmLoading: { type: Boolean },


  /**
 * @description: Show close button
 */
  showCancelBtn: { type: Boolean, default: true },
  /**
   * @description: Show confirmation button
   */
  showOkBtn: { type: Boolean, default: true },
  okType: { type: String  as PropType<BtnType>, default: "primary" },

});
